<template>
    <div class="scheduled">
        <!-- <nu-col :span="24" style="height:calc(180px - 20px);">
            <nutbTitle title="定时任务查询"></nutbTitle> -->
        <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
            :buttons="fyButtons">
            <NuformItem label="报表名称" prop="name" width="300px">
                <nu-input type="text" v-model="formData.reportName" size="middle" placeholder="请输入报表名称"></nu-input>
            </NuformItem>
            <NuformItem label="报表模板" prop="name" width="auto">
                <nu-input type="text" v-model="formData.reportTemplate" size="middle" placeholder="请输入报表模板"></nu-input>
            </NuformItem>
            <NuformItem label="报表时间" prop="name" width="450px">
                <el-date-picker v-model="formData.reportDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </NuformItem>
            <NuformItem label="报表类型" prop="name" width="300px">
                <nu-select class="searchSelect" :filterable="true" :list="reportTypeList" type="text"
                    v-model="formData.reportType" autocomplete="off" @change="reportTypeChange" style="width: 100%;"
                    placeholder="请选择报表类型">
                </nu-select>
            </NuformItem>
            <!-- <NuformItem label="数据粒度" prop="name" width="305px">
                    <nu-select class="searchSelect" :filterable="true" :list="granularityList" type="text"
                        v-model="formData.granularity" autocomplete="off" @change="granularityChange" style="width: 100%;"
                        placeholder="请选择数据粒度">
                    </nu-select>
                </NuformItem> -->
            <div class="btnBox">
                <nu-button type="primary" class="searchButton" @click="searchTable">搜索</nu-button>
                <nu-button class="searchButton" @click="clearParams">清除</nu-button>

            </div>
        </NuVerifyForm>
        <div class="line"></div>
        <div style="height:35px;position: relative;padding: 0 10px;" class="renovateTime">
            <nu-button class="searchButton" @click="bulkDownload">批量下载</nu-button>
        </div>
        <!-- </nu-col> -->
        <!-- <nu-col :span="24" style="height: calc(100% - 180px - 20px);">
            <nutbTitle title="定时任务列表"></nutbTitle> -->
        <!-- <div class="btnBox2">
                    <nu-button type="primary" class="searchButton" size="mini" @click="copyRow">复制</nu-button>
                    <nu-button type="primary" class="searchButton" size="mini" @click="stickRow">粘贴</nu-button>
                </div> -->
        <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options"
            :operates="operates(this)" border :pagination="pagination" @handleSizeChange="handleSizeChange"
            @handleChangePage="handleChangePage" @handleCurrentChange="handleCurrentChange"
            @handleSelectionChange="handleSelectionChange">
        </NuTableList>
        <!-- </nu-col> -->
        <nu-dialog :title="dialogTitle" :visible.sync="dialogShow" width="900px" center :close-on-click-modal="false"
            top="5vh" :modal-append-to-body="false" @close="diaClose">
            <div class="dialogHeaderSearch">
                <NuVerifyForm :model="dialogFormData" ref="dialogFormData" label-width="170px" class="submitForm"
                    :buttons="fyButtons">
                    <NuformItem label="模板名称：" prop="name" width="70%">
                        <nu-input type="text" v-model="dialogFormData.name" size="middle"
                            :disabled="dialogFormDisabled"></nu-input>
                    </NuformItem>
                    <NuformItem label="报表数据项-计量点选择：" prop="checkedMeasure" width="70%">
                        <NuSelectCheckbox :cityOptions="measureOptions" v-model="dialogFormData.checkedMeasure"
                            :disabled="dialogFormDisabled">
                        </NuSelectCheckbox>
                    </NuformItem>
                    <NuformItem label="报表数据项-数据项选择：" prop="checkedDataItem" width="70%">
                        <NuSelectCheckbox :cityOptions="dataItemOptions" v-model="dialogFormData.checkedDataItem"
                            :disabled="dialogFormDisabled">
                        </NuSelectCheckbox>
                    </NuformItem>
                    <NuformItem label="数据粒度：" prop="granularity" width="100%">
                        <el-radio-group v-model="dialogFormData.granularity" :disabled="dialogFormDisabled">
                            <el-radio-button v-for="(item, index) in granularityGroupList" :key="index"
                                :label="item"></el-radio-button>
                        </el-radio-group>
                    </NuformItem>
                    <NuformItem label="是否生成定时报表：" prop="type" width="70%">
                        <el-radio-group v-model="dialogFormData.type" :disabled="dialogFormDisabled">
                            <el-radio-button label="是"></el-radio-button>
                            <el-radio-button label="否"></el-radio-button>
                        </el-radio-group>
                    </NuformItem>
                    <NuformItem label="定时报表生成时间：" prop="time" width="70%" v-if="isEditTimeTextShow">
                        <nu-input type="text" v-model="dialogFormData.timeText" size="middle" disabled></nu-input>
                    </NuformItem>
                </NuVerifyForm>
                <nu-button class="dialogSearchButton" type="primary" @click="diaClose">关闭</nu-button>
            </div>
        </nu-dialog>
    </div>
</template>
<script>
import nuCol from "@/components/base/col.vue"
import nutbTitle from "@/components/base/tableTitle.vue"
import NuVerifyForm from "@/components/verify-form"
import NuformItem from "@/components/verify-form/form-item.vue"
import nuInput from "@/components/base/input"
import nuSelect from "@/components/base/select"
import nuButton from "@/components/base/button"
import NuTableList from "@/components/tableList/TableFormList"
import nuDialog from "@/components/base/dialog"
import nuRadio from "@/components/base/radio"
import nuRadioButton from "@/components/base/radio-button"
import NuSelectCheckbox from "@/components/select-checkBox/select-checkBox.vue"
import axios from 'axios'

const operates = that => [
    {
        label: '下载',
        icon: '',
        width: '90px',
        isShow: row => {
            return true;
        },
        disabled: row => {
            return false;
        },
        method: row => {
            that.reportDownload(row);
        },
    },
    // {
    //   isShow: row => {
    //     return false;
    //   },
    // },
];
import { getToken } from "@/utils/auth";
export default {
    name: "scheduled",
    components: { nuCol, nutbTitle, NuVerifyForm, NuformItem, nuInput, nuSelect, nuButton, NuTableList, nuDialog, nuRadio, nuRadioButton, NuSelectCheckbox },
    data() {
        return {
            formData: {
                reportName: '',
                reportTemplate: '',
                reportDate: [],
                reportType: '',
                granularity: ''
            },
            dialogFormData: {
                name: '日15min电量',
                checkedMeasure: ['计量点1', '计量点2'],
                checkedDataItem: ['正向有功', '反向有功'],
                granularity: '每15min增量值',
                type: '是',
            },
            dialogTitle: '',
            dialogShow: false,
            measureOptions: ['全选'],
            dataItemOptions: ['全选'],
            granularityGroupList: ['每15min增量值', '每15min原值', '每小时增量值', '每天增量值', '每月增量值'],
            fyButtons: [],
            operates,
            pagination: {
                pageSize: 20,
                total: 0,
                currentPage: 1,
            },
            reportTypeList: [{ label: '日报表', value: 1 }, { label: '月报表', value: 2 }, { label: '年报表', value: 3 }],
            granularityList: [{ label: '每15min增量值', value: 1 }, { label: '每15min原值', value: 2 }, { label: '每小时增量值', value: 3 }, { label: '每天增量值', value: 4 }, { label: '每月增量值', value: 5 }],
            columns: [
                {
                    label: '序号',
                    prop: 'ranking',
                    width: '70px',
                    render: (h, params) => {
                        return h('span', params.index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize);
                    },
                },
                {
                    label: '报表名称',
                    prop: 'reportName',
                },
                {
                    label: '报表模板',
                    prop: 'reportTemplate',
                    render: (h, params) => {
                        return h(nuButton, {
                            props: {
                                type: 'text'
                            },
                            class: 'tableOperateBtn',
                            on: {
                                click: () => {
                                    this.lookover(params.row);
                                },

                            }
                        }, params.row.reportTemplate);
                    },
                },
                {
                    label: '报表类型',
                    prop: 'reportType',
                },
                {
                    label: '数据粒度',
                    prop: 'granularityName',
                },
                {
                    label: '报表生成时间',
                    prop: 'reportDate',
                    sortable: true,
                    sortMethod: (a, b) => {
                        return new Date(a.reportDate).getTime() > new Date(b.reportDate).getTime()
                    }
                }
            ],
            dataSource: [{}],
            tableCheckSelect: [],
            options: {
                'default-expand-all': true,
                'element-loading-background': 'rgba(225,239,242)',
                'element-loading-text': '数据正在加载中',
                'row-key': 'pid',
                'header-cell-style': {
                    background: 'rgba(105, 159, 209, 0.7)',
                    color: '#fff',
                    fontWeight: 'bold',
                    fontsize: '16px',
                },
                height: 'calc(100vh - 360px)',
                // props: {
                //     fixed: 'right'
                // },
                selection: true,
                selectable: (row, index) => {
                    return true
                }
            },
        }
    },
    mounted() {
        this.getPointNames()
        this.getMesaNames()
        this.formData.reportType = this.reportTypeList[0].value.toString()
        this.formData.granularity = this.granularityList[0].value.toString()
        this.getScheduledTableData()
    },
    computed: {
        dialogFormDisabled() {
            return true
        },
        isEditTimeTextShow: function () {
            return this.dialogFormData.type == '是'
        }
    },
    methods: {
        /**
         * 查询
         */
        searchTable() {
            this.$refs['formData'].searchForm('form');
        },
        /**
         * form组件内置查询事件
         */
        searchForm(val) {
            if (val) {
                this.getScheduledTableData();
            }
        },
        /**
         * 清除数据
         */
        clearParams() {
            this.resetForm('formData')
        },
        /**
         * 重置表单
         */
        resetForm(formName) {
            this.$refs[formName].resetForm('form');
            for (let k in this[formName]) {
                if (Object.prototype.toString.call(this[formName][k]) == "[object String]") {
                    this[formName][k] = ''
                } else if (Object.prototype.toString.call(this[formName][k]) == "[object Array]") {
                    this[formName][k] = []
                } else if (Object.prototype.toString.call(this[formName][k]) == "[object Number]") {
                    this[formName][k] = ''
                }
            }
        },
        /**
         * 批量下载
         */
        bulkDownload() {
            if (!this.tableCheckSelect.length) {
                this.$message({
                    type: 'info',
                    message: '请先选择一个模板'
                });
                return false
            }
            console.log(this.tableCheckSelect)
        },
        /**
         * 弹窗-关闭
         */
        diaClose() {
            this.dialogShow = false
            // this.resetForm('dialogFormData')
        },
        /**
         * 重置表单
         */
        resetForm(formName) {
            this.$refs[formName].resetForm('form');
            for (let k in this[formName]) {
                if (Object.prototype.toString.call(this[formName][k]) == "[object String]") {
                    this[formName][k] = ''
                } else if (Object.prototype.toString.call(this[formName][k]) == "[object Array]") {
                    this[formName][k] = []
                } else if (Object.prototype.toString.call(this[formName][k]) == "[object Number]") {
                    this[formName][k] = ''
                }
            }
        },
        /**
         * 类型change事件
         */
        reportTypeChange() {

        },
        /**
         * 数据粒度change事件
         */
        granularityChange() {

        },
        /**
         * 每页条数变化事件
         */
        handleSizeChange(val) {
            this.pagination.currentPage = 1;
            this.pagination.pageSize = val;
            this.getScheduledTableData();
        },
        /**
         * 改变分页触发事件
         */
        handleChangePage(val) {
            this.pagination.currentPage = val;
            this.getScheduledTableData();
        },
        /**
         * 单击表格行
         */
        handleCurrentChange(val) {
            console.log(val)
        },
        /**
         * 表格复选框
         */
        handleSelectionChange(val) {
            this.tableCheckSelect = val
        },
        /**
         * 查看模板
         */
        lookover(row) {
            this.dialogTitle = row.reportName + '模板'
            this.dialogShow = true
            console.log(row)
            Object.assign(this.dialogFormData, row)
            let o = {
                '日报表': '每日0：30生成昨日日报表',
                '月报表': '每月1号0：30生成上月月报表',
                '年报表': '每年1月1号0：30生成去年年报表'
            }
            this.dialogFormData.timeText = o[row.granularity] ? o[row.granularity] : o.default
        },
        /** 下载模板操作 */
        reportDownload(row) {
            // this.download('system/user/importTemplate', {
            // }, `user_template_${new Date().getTime()}.xlsx`)
            axios.get('/1.xlsx', {
                responseType: 'blob',
            }).then(response => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                let fname = '模板.xls';
                link.href = url;
                link.setAttribute('download', fname);
                document.body.appendChild(link);
                link.click();
            }).catch(error => {
                console.log('error:' + JSON.stringify(error))
            });
        },
        /**
         * 获取表格数据
         */
        getScheduledTableData() {
            let postData = {
                ...this.formData,
                ...this.pagination,
            };
            for (let k in postData.query) {
                if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
                    postData.query[k] = postData.query[k].toString().trim();
                }
            }
            this.dataSource = [];
            this.$httpGet(window.api.getScheduledTable, postData).then(res => {
                if (res.success && res.data) {
                    this.pagination.total = res.totalCount;
                    this.dataSource = res.data;
                } else {
                }
            }).catch(err => {

            });
        },
        /**
         * 获取电度量名称
         */
        getPointNames() {
            this.$httpGet(window.api.getPointNames)
                .then((res) => {
                    if (res.code == 200) {
                        this.measureOptions = ['全选', ...res.pointNames]
                    }
                })
                
        },
        /**
         * 获取量测类型
         */
        getMesaNames() {
            this.$httpGet(window.api.getMesaNames)
                .then((res) => {
                    if (res.code == 200) {
                        this.dataItemOptions = ['全选', ...res.mesaNames]
                    }
                })
                .catch((err) => { });
        },
    },
}
</script>
<style scoped lang="scss">
.scheduled {
    height: 100%;
}

.searchForm {
    // height: calc(100% - 40px);
    display: flex;
    // align-items: center;
    position: relative;
    flex-wrap: wrap;
    padding-right: 160px;
}

.dialogHeaderSearch {
    background-color: var(--model-bgc);
    padding: 10px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
}

.btnBox {
    display: flex;
    // float: right;
    z-index: 10;
    position: absolute;
    // top: 70px;
    right: 10px;
    margin: 10px 0 0 0;
}
</style>
